<template>
    <view>
        <!--<u-sticky>
            <view class="search-bar">
                <view class="search-bar-content">
                    <view class="search-item" @click="onSelectWorkshop">
                        <view class="search-item-label">车间</view>
                        <view class="search-item-val">
                            <view class="item-gap">{{ searchParams.workshopName ? searchParams.workshopName : '暂无车间' }}</view>
                            <u-icon name="arrow-down" size="20" />
                        </view>
                    </view>
                    <view class="search-item">
                        <view class="search-item-label">工序</view>
                        <view class="search-item-val">
                            <view class="item-gap">细纱</view>
                            <u-icon name="arrow-down" size="20" />
                        </view>
                    </view>
                </view>
            </view>
        </u-sticky>-->
        <view class="bg grid-container">
            <view class="grid-content">
                <view class="grid-content-title">
                    <view class="grid-content-title-border"></view>
                    <view class="">功能</view>
                </view>
                <u-row gutter="10">
                    <view style="display: flex; flex-wrap: wrap; width: 100%;margin-top: 20rpx;">
                        <u-col
                            v-for="item in stateList"
                            :key="item.id"
                            :span="6"
                        >
                            <view class="grid-item" @click="onJump(item)">
                                <view class="grid-item-icon-box" :style="{background: item.bgColor}">
                                    <u-icon :name="item.icon" size="36" color="#fff" />
                                </view>
                                <view class="grid-item-label">{{item.name}}</view>
                                <view v-if="item.count" class="count-bar">{{ item.count > 99 ? '99+' : item.count }}</view>
                            </view>
                        </u-col>
                    </view>
                </u-row>
            </view>
        </view>
    </view>
</template>
<script>
import {showLoading} from "../../../../utils/jk-utils";

export default {
    data() {
        return {
            stateList: [
                { id: 1, name: '开台了机', path: '/pages/production/ltPrd/machineList/index', state: 0, icon: 'play-circle', bgColor: 'rgb(21, 166, 87)', count: 0 },
                { id: 2, name: '锭组设定', path: '/pages/production/ltPrd/setMachineSpinGroup/index', state: 0, icon: 'list-dot', bgColor: 'rgb(232, 148, 48)', count: 0 },
                { id: 3, name: '开台明细', path: '/pages/production/ltPrd/openList/index', state: 1, icon: 'order', bgColor: '#2d8cf0', count: 0 },
                { id: 4, name: '络筒报表', path: '', state: 2, icon: 'coupon', bgColor: 'rgb(129, 65, 217)', count: 0 },
            ],
            showWorkshop: false,
            searchParams: {
                workshopId: null,
                workshopName: null,
            },
            workshopList: [],
        };
    },
    onShow() {
    },
    methods: {
        onJump(item) {
            if (item.path) {
                wx.navigateTo({
                    url: item.path + `?state=${item.state}`
                });
            } else {
                wx.showToast({
                    title: '敬请期待',
                    icon: 'error'
                })
            }
        },
        async getDependentData() {
            showLoading(true);
            showLoading(false);
        },
        onSelectWorkshop() {
            let _this = this;
            uni.showActionSheet({
                itemList: _this.workshopList.map(x => x.workshopName),
                success (res) {
                    _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
                    _this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex].workshopName);
                    _this.getDependentData();
                }
            });
        }
    }
}
</script>
<style scoped lang="scss">
.search-bar {
    height: 30px;
    background: #5c6be3;
    display: flex;
    justify-content: center;
    align-items: center;
    .search-bar-content {
        width: 80%;
        background: #fff;
        margin-bottom: -60rpx;
        border-radius: 14rpx;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        .search-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 14rpx 0;
            .search-item-val {
                display: flex;
                align-items: center;
                color: #515a6e;
                font-size: 28rpx;
            }
            .search-item-label {
                color: #c5c8ce;
                font-size: 26rpx;
                margin-bottom: 8rpx;
            }
        }

    }

}

.grid-container {
    height: calc(100vh - 0px);
    overflow: auto;
    .grid-content {
        padding: 0 32rpx;
        margin-top: 32rpx;
        .grid-content-title {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            .grid-content-title-border {
                width: 10rpx;
                height: 54rpx;
                background: #2d8cf0;
                border-radius: 10rpx;
                margin-right: 12rpx;
            }
        }
        .grid-item {
            background: #fff;
            box-shadow: 0 0 4rpx 0 #eee;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 18rpx 10rpx;
            border-radius: 18rpx;
            margin-bottom: 20rpx;
            position: relative;
            .grid-item-label {
                font-size: 28rpx;
                margin-top: 14rpx;
                text-align: center;
            }
            .count-bar {
                position: absolute;
                top: 20rpx;
                right: 20rpx;
                background: #ed4014;
                color: #fff;
                font-size: 24rpx;
                width: 50rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
            }

            .grid-item-icon-box {
                width: 100rpx;
                height: 100rpx;
                flex-shrink: 0;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
